/* Custom styles for better layout on large screens */

/* Override Mintlify's max-w-xl on content-area */
#content-area {
  max-width: none !important;
}

/* Increase max-width for main content area on large screens */
@media (min-width: 1280px) {
  #content-area,
  .mdx-content,
  .docs-content,
  .prose {
    max-width: 900px !important;
  }
}

@media (min-width: 1536px) {
  #content-area,
  .mdx-content,
  .docs-content,
  .prose {
    max-width: 1000px !important;
  }
}

@media (min-width: 1920px) {
  #content-area,
  .mdx-content,
  .docs-content,
  .prose {
    max-width: 1200px !important;
  }
}

/* For ultrawide displays (21:9) */
@media (min-width: 2560px) {
  #content-area,
  .mdx-content,
  .docs-content,
  .prose {
    max-width: 1600px !important;
  }
}

/* Adjust the main container to utilize more space */
@media (min-width: 1280px) {
  main {
    max-width: none !important;
  }

  .container {
    max-width: 1400px !important;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1600px !important;
  }
}

@media (min-width: 2560px) {
  .container {
    max-width: 1800px !important;
  }
}
